<script setup lang="ts">
import Breadcrumb from "@/components/breadcrumb/Breadcrumb.vue"
import AutoForm from "@/components/auto-form/AutoForm.vue"
import {onMounted, ref} from "vue";
import type { MovieTypeReqVo, PageMovieTypeReqVO, PageMovieTypeRespVO} from "@/interface/movie-type.ts";
import {Page} from "@/interface/base.ts";
import {
  useMovieTypeAddApi,
  useMovieTypeEditApi,
  usePageMovieTypeApi
} from "@/services/api";
import {AutoFormItem} from "@/interface/auto-form.ts";
import {cloneDeep} from "lodash";

const dialogVisible = ref(false)
const title = ref("")
const addModel: Record<string, AutoFormItem> = {
  type: {
    key: "type",
    name: "类型",
    value: "",
    itemType: "input",
    placeholder: "请输入类型",
    rules: {
      required: true,
      message: '请输入类型',
      trigger: 'blur'
    }
  }
}
const model = ref<Record<string, AutoFormItem>>(cloneDeep(addModel))
const pageMovieTypeReq = ref<PageMovieTypeReqVO>({
  size: 10,
  current: 1
})
const movieTableData = ref<Page<PageMovieTypeRespVO>>({
  list: [],
  total: 0
})
const loadData = async () => {
  const {data: res} = await usePageMovieTypeApi(pageMovieTypeReq.value)
  movieTableData.value = res
}
/**
 * 根据类型名称进行搜索
 */
const handleSearch = (): void => {
  loadData()
}
/**
 * 处理类型添加方法
 */
const handleAdd = (): void => {
  title.value = "新增"
  model.value = null
  model.value = cloneDeep(addModel)
  dialogVisible.value = true
}
/**
 * 处理影片预览操作
 */
const handleDetail = () => {

}
/**
 * 处理影片编辑操作操作
 */
const handleEdit = (row: MovieTypeReqVo) => {
  title.value = "编辑"
  model.value.id = {
    key: "id",
    name: "id",
    value: row.id,
    itemType: 'none'
  }
  Object.keys(row).forEach(key => {
    model.value[key].value = row[key]
  })
  dialogVisible.value = true
}
const handleSizeChange = () => {
  pageMovieTypeReq.value.current = 1
  loadData()
}
const handleCurrentChange = (val: number) => {
  pageMovieTypeReq.value.current = val
  loadData()
}
const onSubmit = async (data: MovieTypeReqVo) => {
  if (data.id) {
    await useMovieTypeEditApi(data)
    await loadData()
  } else {
    await useMovieTypeAddApi(data)
    await loadData()
  }
  dialogVisible.value = false
}
const onCancel = () => {
  dialogVisible.value = false
}
onMounted(() => {
  loadData()
})
</script>

<template>
  <div class="container">
    <div class="breadcrumb">
      <breadcrumb></breadcrumb>
    </div>
    <div class="search">
      <el-form :inline="true" :model="pageMovieTypeReq" class="demo-form-inline">
        <el-form-item label="片名">
          <el-input v-model="pageMovieTypeReq.type" placeholder="请输入类型" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="movieTableData.list" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="60"/>
        <el-table-column prop="type" label="片名" width="180"/>
        <el-table-column fixed="right" label="操作" width="180">
          <template #header>
            <el-button link type="primary" size="large" @click="handleAdd">
              新增
            </el-button>
          </template>
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
          v-model:current-page="pageMovieTypeReq.current"
          v-model:page-size="pageMovieTypeReq.size"
          :page-sizes="[10, 20, 30, 40]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="movieTableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <auto-form :title="title" :dialog-visible="dialogVisible" :model="model" @onSubmit="onSubmit"
               @onCancel="onCancel"></auto-form>
  </div>
</template>

<style scoped>
.container {
  flex: 1;
  background-color: #fdfdfd;
  padding: 20px;
}

.search {
  padding: 10px;
}

.pagination {
  padding: 20px;
}


</style>